<template>
	<view class="container">
		<view class="swiper-box">
			<view class="action-bar h-flex-x">
				<view class="h-flex-x" @tap="close()">
					<!-- <uni-icons type="bars" size="18" color="#666"></uni-icons> -->
					<text style="padding-left: 10rpx;font-weight: bold;">{{ topicIndex + 1 }}</text>
					<text style="color: #999;padding: 0 5rpx;">/</text>
					<text style="color: #999;">{{ dataList.length }}</text>
				</view>
				<view class="h-flex-x" style="display: flex;align-items: center;">
				</view>
			</view>
			<swiper class="swiper" :duration="duration" :current="swiperIndex" :disable-programmatic-animation="true" @change="onChange" @animationfinish="onAnimationfinish">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view class="" style="background-color: ;position: fixed;top: 0%;left: 0;right: 0;" v-if="item.questionType == 3">
								<uv-slider v-model="value"  min="30"></uv-slider>
							</view>
							<view class="topic-content" style="padding-top: 50rpx;">
								<text style="padding-right: 20rpx;">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view style="display: flex;align-items: center;"><u-parse :content="item.questionStemExtJson.testQuestionsContent"></u-parse></view>
								<view class="answer-sheet">
									<view
										class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.questionStemExtJson.testQuestionOptions"
										:key="sheetIndex"
									>
										<view
											v-if="item.questionType == 0"
											style="display: flex;justify-content: center;align-items: center;"
											class="icon h-flex-x h-flex-center"
											:style="{ border: sheetItem.answerStatus ? '1rpx solid #0089ff' : '1rpx solid #f5f5f5' }"
										>
											<view
												style="width: 20rpx;height: 20rpx;border-radius: 10rpx;"
												:style="{ background: sheetItem.answerStatus? '#0089ff' : '#f5f5f5' }"
											></view>
										</view>
										<view v-if="item.questionType == 0" :style="{ color: sheetItem.answerStatus  ? '#0089ff' : '#333' }">
											{{ sheetItem.optionsName }}
										</view>
										<view
											v-if="item.questionType !== 0"
											class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerStatus }"
										>
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view v-if="item.questionType !== 0" :style="{ color: sheetItem.answerStatus ? '#0089ff' : '#333' }">
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" v-if="item.questionType != 3">
									<text>答案</text>
									<text style="color: #0089ff;font-weight: bold;padding: 0 20rpx;">{{ item.answer }}</text>
								</view>
								<view class="answer-doubt" v-if="item.questionType != 3">
									<text style="font-weight: bold;">题目解析：</text>
									<u-parse :content="item.questionAnalysisExtJson"></u-parse>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<swiper
				class="swiper"
				v-if="swiperTwoList.length > 0"
				:duration="duration"
				:current="swiperTwoIndex"
				:disable-programmatic-animation="true"
				@change="onTwoChange"
				@animationfinish="onTwoAnimationfinish"
				style="position: fixed;top: 50%;left: 0;right: 0;"
				:style="{ top: value + '%' }"
			>
				<swiper-item v-for="(item, index) in swiperTwoList" :key="index">
					<view class="action-bar h-flex-x" style="background-color: #fff;border-top: 1rpx solid #e8e8e8;">
						<view class="h-flex-x" style="display: flex;align-items: center;">本大题共{{ swiperTwoList.length }}小题</view>
						<view class="h-flex-x" @tap="close()">
							<!-- <uni-icons type="bars" size="18" color="#666"></uni-icons> -->
							<text style="padding-left: 10rpx;font-weight: bold;">{{ topicTwoIndex + 1 }}</text>
							<text style="color: #999;padding: 0 5rpx;">/</text>
							<text style="color: #999;">{{ swiperTwoList.length }}</text>
						</view>
					</view>
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view class="topic-content" style="padding-bottom: 70vh;background-color: #fff;">
								<text style="padding-right: 20rpx;">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view style=""><u-parse :content="item.testQuestionsContent"></u-parse></view>
								<view class="answer-sheet">
									<view
										class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.testQuestionOptions"
										:key="sheetIndex"
									>
										<view
											v-if="item.questionType == 0"
											style="display: flex;justify-content: center;align-items: center;"
											class="icon h-flex-x h-flex-center"
											:style="{ border: sheetItem.answerStatus ? '1rpx solid #0089ff' : '1rpx solid #f5f5f5' }"
										>
											<view
												style="width: 20rpx;height: 20rpx;border-radius: 10rpx;"
												:style="{ background: sheetItem.answerStatus ? '#0089ff' : '#f5f5f5' }"
											></view>
										</view>
										<view v-if="item.questionType == 0" :style="{ color: sheetItem.answerStatus ? '#0089ff' : '#333' }">
											{{ sheetItem.optionsName }}
										</view>

										<view
											v-if="item.questionType !== 0"
											class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerStatus }"
										>
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view v-if="item.questionType !== 0" :style="{ color: sheetItem.answerStatus ? '#0089ff' : '#333' }">
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" >
									<text>答案</text>
									<text style="color: #0089ff;font-weight: bold;padding: 0 20rpx;">{{ item.answer }}</text>
									
								</view>
								<view class="answer-doubt" >
									<text style="font-weight: bold;">题目解析：</text>
									<u-parse :content="item.analysis"></u-parse>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import {
	getUserCollectTestQuestionsList,
	updatePlugsPracticeStudentTestRecord,
	getPracticeTestQuestionsByquestionBankList,
	insertPlugsPracticeTestRecordDetails,
	insertPlugsCollect,
	cancelCollectByDataId,
	getPlugsPracticeTestRecordDetailsByPracticeId,
	updatePlugsPracticeTestRecordDetails,
	searchPlugsPracticeTestRecordById,
	searchPlugsPracticeTestPaperById,
	updatePlugsPracticeTestRecord
} from '../../../utils/api.js';
export default {
	data() {
		return {
			indexId: 0,
			indexId1: 0,
			dataList: [], // 数据源
			swiperList: [], // 轮播图数据列表
			swiperIndex: 0, // 轮播图当前位置
			swiperTwoIndex: 0, // 理解题轮播图当前位置
			isChange: false, // 是否切换
			isTwoChange: false, // 是否切换
			topicIndex: 0, // 题目位置
			topicTwoIndex: 0, //理解题题目位置
			duration: 200, // 动画过渡时长
			showPopup: false,
			info: {},
			show: false,
			typeId: 0,
			practiceId: 0,
			collectList: [],
			swiperTwoList: [], //理解子试题
			value: 50,
			success:0,
			error:0,
			styleObj: {
				display: 'flex',
				width: 'auto',
				flexWrap: 'wrap'
			}
		};
	},
	computed: {
		
		
	},
	filters: {
		topicType(type) {
			if (type == 0) {
				return '判断题';
			}
			if (type == 1) {
				return '单选题';
			}
			if (type == 2) {
				return '多选题';
			}
			if (type == 3) {
				return '理解题';
			}
			return '';
		}
	},
	onShow() {
		this.getcollectList();
	},
	onLoad(option) {
		this.dataList = JSON.parse(decodeURIComponent(option.dataList));
		this.typeId = 0;
		this.indexId = Number(option.indexId);
		this.indexId1 = 0;
	},
	methods: {
		open() {
			this.$refs.showpopup.open();
			this.countResult()
		},
		countResult() {
			this.success = 0;
			this.error = 0;
			this.constNum = 0;
			this.dataList.forEach(item => {
				if (item.questionType != 3) {
					this.constNum++;
					if (item.answerResult) {
						if (item.answerResult == item.answer) {
							this.success++;
						} else {
							this.error++;
						}
					}
				} else {
					item.questionStemExtJson.testQuestionList.forEach(itemm => {
						this.constNum++;
						if (itemm.answerResult) {
							console.log(itemm.answerResult, itemm.answer, 666);
							if (itemm.answerResult == itemm.answer) {
								this.success++;
							} else {
								this.error++;
							}
						}
					});
				}
			});
			this.progress_txt = ((this.success / this.constNum) * 100).toFixed(2);
			this.weinum = this.constNum - this.success - this.error;
		},
		// close() {
		// 	this.$refs.showpopup.close();
		// },
		getDataList() {
			
						this.dataList.forEach(item => {
							item.answer = [];
							item.list = [];
							if (item.questionType != 3) {
								item.questionStemExtJson.testQuestionOptions.forEach(result => {
									if (result.answerStatus == 1) {
										item.answer.push(result.optionsName);
									}
								});
							} else {
								item.questionStemExtJson.testQuestionList.forEach(result => {
									result.answer = [];
									result.list = [];
									result.testQuestionOptions.forEach(result1 => {
										if (result1.answerStatus == 1) {
											result.answer.push(result1.optionsName);
										}
									});
								});
							}
						});
						this.renderSwiper(this.indexId, this.indexId1);
						this.renderTwoSwiper(this.indexId, this.indexId1);
						this.pickerTopic(this.indexId);
						
		},
		getBankList() {
			let data = {
				id: this.practiceId
			};
			searchPlugsPracticeTestRecordById(data)
				.then(res => {
					if (res.code == 200) {
						console.log(this.dataList, 'qqqqqqqqq');
						console.log(res.body.plugsPracticeTestRecordDetailsList, 'aaaaaaaaa');
						this.dataList.forEach(item => {
							res.body.plugsPracticeTestRecordDetailsList.forEach(itemm => {
								if (item.id == itemm.testQuestionsId) {
									// item.answerStatus = itemm.answerStatus;
									if (item.questionType == 0 || item.questionType == 1) {
										item.answerResult = itemm.userAnswer;
										item.questionStemExtJson.testQuestionOptions.forEach(sult1 => {
											if (item.answerResult == sult1.optionsName) {
												sult1.answerResult = item.answerResult;
											}
										});
									} else if (item.questionType == 2) {
										item.answerResult = itemm.userAnswer;
										item.list = item.answerResult.split(',');
										item.list.forEach(sult => {
											item.questionStemExtJson.testQuestionOptions.forEach(sult1 => {
												if (sult == sult1.optionsName) {
													sult1.answerResult = sult;
												}
											});
										});
									} else if (item.questionType == 3) {
										itemm.result11 = itemm.userAnswer.split('_');
										itemm.index = itemm.userAnswer.split('_')[1];
										itemm.content = itemm.userAnswer.split('_')[2];
										item.questionStemExtJson.testQuestionList.forEach((result, index) => {
											if (itemm.index == index) {
												result.answerStatus = itemm.answerStatus;
												result.answerResult = itemm.content;
												if (result.questionType != 2) {
													result.testQuestionOptions.forEach(sult1 => {
														if (result.answerResult == sult1.optionsName) {
															sult1.answerResult = itemm.content;
														}
													});
												} else {
													result.list = result.answerResult.split(',');
													result.list.forEach(sult => {
														result.testQuestionOptions.forEach(sult1 => {
															if (sult == sult1.optionsName) {
																sult1.answerResult = sult;
															}
														});
													});
												}
											}
										});
									}
								}
							});
						});
						this.dataList.forEach((item)=>{
							if(item.questionType!==3){
								if(!item.answerResult){
									item.answerResult='未作答'
											item.questionStemExtJson.testQuestionOptions.forEach((sult1)=>{
												if(sult1.answerStatus==1)
													sult1.answerResult=sult1.optionsName
												
											})
								}
							}else{
								item.questionStemExtJson.testQuestionList.forEach((result,index)=>{
									if(!result.answerResult){
										result.answerResult='未作答'
												result.testQuestionOptions.forEach((sult1)=>{
													if(sult1.answerStatus==1)
														{sult1.answerResult=sult1.optionsName}
												})
											
									}
										
										
								})
							}
							
						})
					}
				})
				.then(() => {
					this.renderSwiper(this.indexId, this.indexId1);
					this.renderTwoSwiper(this.indexId, this.indexId1);
					this.pickerTopic(this.indexId);
				});
		},
		getcollectList() {
			let self = this;
			let postdata = {
				page: 1,
				size: 50,
				businessId: 0,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5'
			};
			getUserCollectTestQuestionsList(postdata).then(res => {
				if (res.code == 200) {
					this.collectList = res.body.list;
					this.getDataList();
				}
			});
		},
		dateFormat(time) {
			//将时间戳格式转换成年月日时分秒
			let date = new Date(time);
			let Y = date.getFullYear() + '-';
			let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';

			let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			let strDate = Y + M + D + h + m + s;
			return strDate;
		},
		jiaojuan() {
			let that = this;
			uni.showModal({
				content: '您是否交卷？',
				cancelText: '继续做题',
				confirmText: '交卷',
				success(res) {
					if (res.confirm) {
						let data = {
							id: that.practiceId,
							testStatus: 1,
							endTestTime: that.dateFormat(new Date().getTime())
						};
						updatePlugsPracticeTestRecord(data).then(res => {
							if (res.code == 200) {
								uni.navigateBack();
							}
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		// 渲染 swiper
		renderSwiper(index) {
			console.log('我问问');
			console.log(this.dataList);
			console.log(index, '');
			let list = [];
			let current = 1;
			console.log(this.dataList[1 - 1], 555);
			if (this.dataList[index - 1]) {
				console.log(this.dataList[index - 1], 666);
				list.push(this.dataList[index - 1]);
			} else {
				current = 0;
			}
			console.log(list, 1);
			list.push(this.dataList[index]);
			console.log(list, 2);
			if (this.dataList[index + 1]) {
				list.push(this.dataList[index + 1]);
			}

			this.duration = 0;

			setTimeout(() => {
				this.swiperList = list;
				this.swiperIndex = current;
				// this.topicTwoIndex = 0;
				// this.swiperTwoIndex = 0;
				if (this.swiperList[this.swiperIndex].questionType == 3) {
					this.swiperTwoList = this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionList;
					this.swiperTwoList.forEach(item => {
						item.answer = [];
						item.list = [];
						item.testQuestionOptions.forEach(result => {
							if (result.answerStatus == 1) {
								item.answer.push(result.optionsName);
							}
						});
					});
				} else {
					this.swiperTwoList = [];
				}

				setTimeout(() => {
					this.duration = 200;
				}, 100);
			}, 50);
		},
		renderTwoSwiper(index, indexxxx) {
			console.log('去去去');
			console.log(index, indexxxx, '22222222222');
			let list = [];
			let current = 1;
			console.log(this.dataList[1 - 1], 555);
			if (this.dataList[index - 1]) {
				console.log(this.dataList[index - 1], 666);
				list.push(this.dataList[index - 1]);
			} else {
				current = 0;
			}
			console.log(list, 1);
			list.push(this.dataList[index]);
			console.log(list, 2);
			if (this.dataList[index + 1]) {
				list.push(this.dataList[index + 1]);
			}

			this.duration = 0;

			setTimeout(() => {
				this.swiperList = list;
				console.log(this.swiperList, '啊啊啊');
				this.swiperIndex = current;
				this.topicTwoIndex = indexxxx;
				this.swiperTwoIndex = indexxxx;
				console.log(this.swiperIndex, '222222');
				console.log(this.swiperTwoIndex, '222222');
				console.log(this.swiperList[this.swiperIndex].questionType, '111111111111111111111111111');
				if (this.swiperList[this.swiperIndex].questionType == 3) {
					this.swiperTwoList = this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionList;
					this.swiperTwoList.forEach(item => {
						item.answer = [];
						item.list = [];
						item.testQuestionOptions.forEach(result => {
							if (result.answerStatus == 1) {
								item.answer.push(result.optionsName);
							}
						});
					});
				} else {
					this.swiperTwoList = [];
				}

				console.log(this.swiperTwoList, '22222222222222222');
				setTimeout(() => {
					this.duration = 200;
				}, 100);
			}, 50);
		},
		// 轮播图切换
		onChange(e) {
			// 非触摸事件不做轮播图状态更新
			if (e.detail.source != 'touch') return;

			// 标识已切换
			this.isChange = true;
			// 轮播图当前位置大于原来时则表示为下一题
			if (e.detail.current > this.swiperIndex) {
				this.topicIndex++;
			} else {
				// 轮播图当前位置小于原来时则表示为上一题
				this.topicIndex--;
			}

			// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
			this.swiperIndex = e.detail.current;
		},
		// 轮播图动画结束
		onAnimationfinish(e) {
			if (!this.isChange) return;

			this.isChange = false;
			setTimeout(() => {
				this.renderSwiper(this.topicIndex);
			}, 10);
		},
		// 理解题轮播图切换
		onTwoChange(e) {
			// 非触摸事件不做轮播图状态更新
			if (e.detail.source != 'touch') return;

			// 标识已切换
			this.isTwoChange = true;
			// 轮播图当前位置大于原来时则表示为下一题
			if (e.detail.current > this.swiperTwoIndex) {
				this.topicTwoIndex++;
			} else {
				// 轮播图当前位置小于原来时则表示为上一题
				this.topicTwoIndex--;
			}

			// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
			this.swiperTwoIndex = e.detail.current;
			console.log(this.swiperTwoIndex, 1111111111);
		},
		// 理解题轮播图动画结束
		onTwoAnimationfinish(e) {
			if (!this.isTwoChange) return;

			this.isTwoChange = false;
			setTimeout(() => {
				// this.renderSwiper(this.topicIndex);
			}, 10);
		},

		// 选择题目
		pickerTopic(index) {
			this.topicIndex = index;
			this.renderSwiper(index);
			// this.close();
		},
		//理解选择题目
		pickerTwoTopic(index, indexxxx) {
			this.topicIndex = index;
			this.topicTwoIndex = indexxxx;
			this.renderTwoSwiper(index, indexxxx);
			// this.close();
		},
		// 监听答题
	
		
		// 清除自动跳到下一页延时器
		clearAutoNextTopicTime() {
			clearTimeout(this.autoNextTopicTime);
		},
		// 添加收藏
		addFavorite() {
			let favorite = this.dataList[this.topicIndex].favorite;
			if (favorite) {
				delete this.dataList[this.topicIndex].favorite;
				this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
				let postData = {
					dataId: this.dataList[this.topicIndex].id,
					dataType: 3
				};
				cancelCollectByDataId(postData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消收藏',
							duration: 1000,
							icon: 'success'
						});
					} else {
					}
				});
			} else {
				console.log('22222');
				this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
				let postData = {
					dataId: this.dataList[this.topicIndex].id,
					types: 3,
					businessId: 0
				};
				insertPlugsCollect(postData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '收藏成功',
							duration: 1000,
							icon: 'success'
						});
					} else {
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
@import 'lib/helang-flex.scss';

page {
	height: 100%;
}
.actives {
	color: red;
}
.actives1 {
	color: #fff;
}
// 容器
.container {
	height: 100%;
	background-color: #fff;
	position: relative;
	color: #333;
	font-size: 28rpx;
}
// 轮播盒子
.swiper-box {
	position: absolute;
	top: 0rpx;
	left: 0;
	right: 0;
	bottom: 100rpx;
	height: auto;
	width: auto;
	z-index: 1;
}
.action-bar {
	height: 100rpx;
	width: 100%;
	box-sizing: border-box;
	border-bottom: #ddd solid 1px;
	font-size: 28rpx;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	.success-num {
		color: #0089ff;
	}
	.error-num {
		color: #f84d27;
	}
}

.topic-list {
	height: 600rpx;

	.list-box {
		padding: 20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		color: #666;

		.list-item {
			padding-bottom: 20rpx;

			> view {
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				border: #ddd solid 1px;
				border-radius: 50%;
				margin: 0 auto;

				&.active {
					border: #0089ff solid 1px;
				}

				&.success {
					background-color: #dbf2ff;
					color: #0089ff;
					border: none;

					&.active {
						border: #0089ff solid 1px;
					}
				}
				&.success1 {
					background-color: #0089ff;
					color: #fff;
					border: none;
				}

				&.error {
					background-color: #ffeceb;
					color: #f84d27;
					border: none;

					&.active {
						border: #f84d27 solid 1px;
					}
				}
				&.error1 {
					background-color: red;
					color: #fff;
					border: none;
				}
			}
		}
	}
}
.swiper {
	height: 100%;

	.swiper-scroll {
		height: 100%;
	}

	.swiper-item {
		background-color: #fff;
		box-sizing: border-box;
		height: 100%;

		.topic-content {
			padding: 30rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 1.6;
			image{
				width: 660rpx !important;
			}
			// 题目类型标签
			.type-label {
				background-color: #0089ff;
				color: #fff;
				border-radius: 6rpx;
				padding: 4rpx 10rpx;
				font-size: 24rpx;
			}

			// 答题卡
			.answer-sheet {
				margin: 40rpx -30rpx;
				padding: 20rpx;
				.item {
					padding: 20rpx 30rpx;
					background-color: #f5f5f5;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					&:active {
						background-color: #f3f3f3;
					}

					+ .item {
						margin-top: 0;
					}

					.icon {
						margin-right: 20rpx;
						box-shadow: 0 0 5px #999;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						font-size: 26rpx;

						&.success {
							background-color: #0089ff;
							color: #fff;
						}

						&.error {
							background-color: #f84d27;
						}
					}
				}
			}

			// 答题结果
			.answer-result {
				background-color: #f3f3f3;
				border-radius: 8rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
			}

			// 题目解析
			.answer-doubt {
				font-size: 28rpx;
				color: #8a6d3b;
				background-color: #fcf8e3;
				border: #faebcc solid 1px;
				margin-top: 40rpx;
				padding: 20rpx 30rpx;
				border-radius: 8rpx;
				word-break: break-all;
				image{
				  width:620rpx !important;
				}
			}
		}
	}
}

// 底部面板
.panel-bottom {
	position: absolute;
	left: 0;
	// bottom: 0;
	// top: 100rpx;
	height: auto;
	width: 100%;
	z-index: 2;

	// 遮罩
	.shade {
		position: fixed;
		z-index: 9;
		background-color: rgba(33, 33, 33, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	// 内容
	.content {
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
	}

	// 操作栏
	.action-bar {
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: #ddd solid 1px;
		font-size: 28rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		.success-num {
			color: #0089ff;
		}

		.error-num {
			color: #f84d27;
		}
	}

	// 题目列表
	.topic-list {
		height: 600rpx;

		.list-box {
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			color: #666;

			.list-item {
				padding-bottom: 20rpx;

				> view {
					width: 80rpx;
					height: 80rpx;
					background-color: #fff;
					border: #ddd solid 1px;
					border-radius: 50%;
					margin: 0 auto;

					&.active {
						border: #0089ff solid 1px;
					}

					&.success {
						background-color: #dbf2ff;
						color: #0089ff;
						border: none;

						&.active {
							border: #0089ff solid 1px;
						}
					}

					&.error {
						background-color: #ffeceb;
						color: #f84d27;
						border: none;

						&.active {
							border: #f84d27 solid 1px;
						}
					}
				}
			}
		}
	}
}
</style>
